<template>
    <!-- 等级及数量记录 -->
    <div class="card_nav">
        <div 
            v-for='(item, index) in configArr'
            :key='index'
            :class="[choosenItem.color == item.color ? 'xm-card-item-active' : '', 'xm-card-item', `xm-card-item-${item.color}`]" 
            @click="cardClick(item)"
        >
            <p class="xm-card-title">{{item.label}}</p>
            <p class="xm-card-number">{{item.count || 0}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'filterBtns',
        props: {
            configArr: {
                type: Array,
                default: () => [],
                required: true
            }
        },

        data() {
            return {
                choosenItem: ''
            }
        },
        methods: {
            cardClick (item) {
                this.choosenItem = item;
                this.cardSelected = item ? item.color : '';
                this.$emit('changingCondition', item);
            },
            getItem() {
                return this.choosenItem
            },
            setItem(item) {
                this.choosenItem = item;
            }
        },
    }
</script>
<style scoped>
    .card_nav{
        display: flex;
        padding: 16px;
		box-sizing: border-box;
    }
    .card_nav .xm-card-item{
        width: 20%;
        box-shadow: 0px 0px 10px 0px rgba(126, 107, 90, 0.16);
    }
</style>